<template>
  <div class="newsContainter">
    <h3 class="title">{{news.title}}</h3>
    <p class="newsTag">
      <span class="newsCategory">分类：<i>{{news.category}}</i></span>
      <span class="newsTag-sec">作者：{{news.author}}</span>
    </p>
    <hr>
    <div class="content">{{news.desc}}</div>

    <commentMode></commentMode>




  </div>
</template>


<script>
import  Comment from '../common/Comment.vue'


import { Toast } from 'mint-ui'
    export default {
        data:function (){
            return {
                news : []
            }
        },
        created:function (){
            this.getNews();
        },
        methods:{
            getNews(){
                this.$http.get('https://www.apiopen.top/novelInfoApi?name=%E7%9B%97%E5%A2%93%E7%AC%94%E8%AE%B0').then((result)=>{
                    if(result.status === 200){
                        this.news = result.body.data.aladdin;
                    }else{
                        Toast('获取新闻失败')
                    }
                })
            }
        },
        components:{
            'commentMode':Comment
        }
    }
</script>




<style lang="scss" scoped>
.newsContainter {
  padding: 0 15px;

  .newsTag {
    font-size: 12px;
    color: #999;
    // display: flex;
    // justify-content: space-between;
    .newsCategory i {
        font-style: normal;
        color: orange
    }


    .newsTag-sec {
      padding-left: 10px;
    }
  }
  hr {
    border-top: 0.5px solid #eee;
  }

  .title {
    font-size: 20px;
    text-align: center;
    margin: 20px 0;
  }
  .content {
      margin-top: 20px;
    font-size: 15px;
    line-height: 30px;
    color: #999
  }
}
</style>